<template>
  <div>
    <el-dialog
      :title="
        type == 'templateItemId' ? '测点模版告警配置' : '设备测点告警配置'
      "
      :visible.sync="dialogVisible"
      width="40%"
    >
      <div>
        <div>
          <el-button
            size="small"
            type="primary"
            class="button"
            @click="dialogVisibleadd = true"
            >新 增</el-button
          >
        </div>
        <TableColumn
          ref="tabledata"
          :tableData="tableData"
          :tableConfig="tableConfig"
        >
          <el-table-column
            prop="address"
            label="操作"
            align="center"
            width="200"
          >
            <template #default="{ row }">
              <span @click="putlists(row)"
                ><i
                  class="el-icon-edit"
                  style="color: skyblue; margin-right: 20px; cursor: pointer"
                ></i
              ></span>
              <span @click="dandel(row)"
                ><i
                  class="el-icon-delete"
                  style="color: red; cursor: pointer"
                ></i
              ></span>
            </template>
          </el-table-column>
        </TableColumn>
      </div>
      <div slot="footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="
        type == 'templateItemId' ? '测点模版告警配置' : '设备测点告警配置'
      "
      :visible.sync="dialogVisibleadd"
      width="30%"
      @close="quxiao"
    >
      <div>
        <el-form
          ref="formrefs"
          :model="formdata"
          :rules="rules"
          label-width="80px"
        >
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="数据值" prop="value">
                <el-input
                  size="small"
                  v-model="formdata.value"
                  placeholder="请输入数据值"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="数据描述" prop="name">
                <el-input
                  size="small"
                  v-model="formdata.name"
                  placeholder="请输入数据值"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="事件类型" prop="eventType">
                <el-select
                  v-model="formdata.eventType"
                  placeholder="请选择事件类型"
                  size="small"
                  style="width: 100%"
                >
                  <el-option
                    class="select"
                    v-for="item in typelist"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="事件等级" prop="eventLevel">
                <el-select
                  v-model="formdata.eventLevel"
                  placeholder="请选择事件类型"
                  size="small"
                  style="width: 100%"
                >
                  <el-option
                    class="select"
                    v-for="item in levelist"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer">
        <el-button size="small" type="primary" @click="submit">确 定</el-button>
        <el-button size="small" @click="quxiao">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getDemoListapi,
  postDemoListapi,
  delDemoListapi,
  putDemoListapi,
  getDeviceListapi,
  postDeviceListapi,
  delDeviceListapi,
  putDeviceListapi
} from '@/api/ElectricalDistribution/IotTechnology/component'
import { getyanzhongapi } from '@/api/ElectricalDistribution/IotTechnology/layout'
import { getyaocexialaapi } from '@/api/ElectricalDistribution/IotTechnology/measure'
import TableColumn from '@/components/Table/index.vue'
export default {
  name: 'CallPoliceDialogEl',
  components: {
    TableColumn
  },
  data() {
    return {
      formdata: {},
      dialogVisible: false,
      dialogVisibleadd: false,
      type: '',
      isput: false,
      rowval: {},
      typelist: [],
      levelist: [],
      tableData: [],
      tableConfig: [
        { label: '数据值', prop: 'value' },
        { label: '数据描述', prop: 'name' },
        {
          label: '事件类型',
          prop: 'type',
          formatter: (row, column, cellValue, index) => {
            return this.typelist.find((ele) => ele.value == cellValue).text
          }
        },
        {
          label: '严重等级',
          prop: 'level',
          formatter: (row, column, cellValue, index) => {
            return this.levelist.find((ele) => ele.value == cellValue).text
          }
        }
      ],
      rules: {
        value: [{ required: true, message: '请输入数据值', trigger: 'blur' }],
        name: [{ required: true, message: '请输入数据描述', trigger: 'blur' }],
        eventType: [
          { required: true, message: '请选择事件类型', trigger: 'change' }
        ],
        eventLevel: [
          { required: true, message: '请选择严重等级', trigger: 'change' }
        ]
      }
    }
  },

  async mounted() {
    const {
      data: { list }
    } = await getyanzhongapi()
    const {
      data: { list: array }
    } = await getyaocexialaapi()
    this.levelist = list
    this.typelist = array
  },

  methods: {
    async submit() {
      await this.$refs.formrefs.validate()
      const apiMap = {
        templateItemId: {
          add: postDemoListapi, // type=demo 且 新增（isput=false）
          edit: putDemoListapi // type=demo 且 修改（isput=true）
        },
        itemId: {
          add: postDeviceListapi, // type=device 且 新增（isput=false）
          edit: putDeviceListapi // type=device 且 修改（isput=true）
        }
      }
      const currentApi = apiMap[this.type][this.isput ? 'edit' : 'add']
      await currentApi({ ...this.formdata, [this.type]: this.rowval.id }).then(
        (res) => {
          this.$message({
            type: res.code == '200' ? 'success' : 'warning',
            message:
              res.code !== '200'
                ? res.message
                : this.isput
                ? '修改成功'
                : '新增成功'
          })
          this.getlist()
          this.quxiao()
        }
      )
    },
    async getmethod(row, type) {
      this.dialogVisible = true
      this.type = type
      this.rowval = row
      this.getlist()
    },
    async getlist() {
      const {
        data: { list }
      } = await (this.type === 'templateItemId'
        ? getDemoListapi({ [this.type]: this.rowval.id })
        : getDeviceListapi({ [this.type]: this.rowval.id }))
      this.tableData = list
    },
    putlists(row) {
      this.isput = true
      this.dialogVisibleadd = true
      this.$set(this.formdata, 'value', row.value)
      this.$set(this.formdata, 'name', row.name)
      this.$set(this.formdata, 'eventType', String(row.type))
      this.$set(this.formdata, 'eventLevel', String(row.level))
      this.$set(this.formdata, 'id', row.id)
    },
    dandel(row) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await (this.type === 'templateItemId'
            ? delDemoListapi({ id: row.id })
            : delDeviceListapi({ id: row.id }))
          this.$message({
            type: res.code == '200' ? 'success' : 'warning',
            message: res.code == '200' ? '删除成功' : res.message
          })
          this.getlist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    quxiao() {
      this.dialogVisibleadd = false
      this.$refs.formrefs.resetFields()
      this.formdata = {}
      this.isput = false
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__footer {
  text-align: center;
}
.button {
  margin-bottom: 10px;
}
</style>
